@use "scss/colors";
@use "scss/variables";
@use "scss/mixins";

.radioButtonTiles {
  &__tile {
    flex: 1 1 0;
    display: flex;
    align-items: stretch;
    justify-items: stretch;
  }

  &__toggle {
    position: relative;
    z-index: 0;
    display: flex;
    gap: variables.$spacing-md;
    flex-grow: 1;
    padding: variables.$spacing-lg;
    border: variables.$border-thin solid colors.$grey-100;
    border-radius: variables.$border-radius-sm;
    cursor: pointer;

    &--disabled {
      cursor: not-allowed;
    }

    &--light.radioButtonTiles__toggle--light {
      border: none;
      outline: none;
      padding-top: 0;
      padding-bottom: 0;
    }
  }

  &__dot {
    flex: 0 0 auto;
  }

  &__hiddenInput {
    @include mixins.visually-hidden;

    &:checked {
      + .radioButtonTiles__toggle {
        border-color: colors.$blue;
      }
    }

    &:focus-visible {
      + .radioButtonTiles__toggle {
        outline: 2px solid colors.$blue-900;
      }
    }
  }
}
